import React, { Component } from 'react'
import style from './MusicTooles.module.less'
import { connect } from 'react-redux';
import { switchToolesPage } from '@src/store/creators/onlineToolesCreator';
import demo from '@assets/image/demo.jpg'
class MusicTooles extends Component {

    ClickHidden = (event) => {
        let id = event.target.id
        this.props.switchToolesPage(id)
    }
    render() {
        console.log(demo);
        return (
            <div className={style.box}>
                <ul>
                    <li id='吉他' onClick={(event) => {
                        this.ClickHidden(event)
                    }}>
                        <img className={style.img} src={demo} alt='img' />
                        <div className={style.text}>
                            <h2>吉他</h2>
                            <p>这是一把测试用的吉他</p>
                        </div>
                    </li>
                    <li></li>
                    <li></li>
                    <li>

                    </li>
                </ul>

            </div>
        )
    }
}

const mapDispatchToProps = (dispatch) => ({
    switchToolesPage: (id) => (dispatch(switchToolesPage(id)))
})
const mapStateToProps = (state) => ({
    name: state.onlineToolesReducer.name
})
export default connect(mapStateToProps, mapDispatchToProps)(MusicTooles)